<template>
  <div>
      <div class="mall">
           <div v-for="(item,index) in list" :key="index"
      class="mall_container">
          <div class="mall_input_checked">
              <input type="checkbox">
          </div>
          <div class="mall_img">
              <img :src="item.pic" alt="">
          </div>
          <div class="mall_title">
              <div class="mall_name">{{item.name}}</div>
              <div>{{item.minPrice | Price}}</div>
          </div>
          <div>
              <van-stepper v-model="item.num" @plus="onPlus" @minus="onMinus"/>
          </div>
      </div>
      </div>
     
      <div class="mall_bottom">
          <div>
              全选<input type="checkbox">
          </div>
          <div class="mall_bottom_wrapper">
              <div style="width:40%">总量:{{Num}}</div>
              <div>总价:{{Price.toFixed(2)}}</div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            value:0,
        }
    },
    mounted(){
        // console.log(this.$route.query.properties);
        // console.log(this.$route.query.list);
    //    localStorage.setItem("listP",JSON.stringify(this.$route.query.list))
        // this.list.push(this.$route.query.list);
        // console.log(this.list);
        // console.log(this.list.vetStatus);
        // localStorage.setItem("listP",JSON.stringify(this.$route.query.list))
        this.list = this.$store.state.shop
        
    },
    filters:{
        Price(val){
            return "￥" + val
        }
    },
    methods:{
        onChange(value,detail){
            console.log(value,detail);
        },
        onPlus(){
                this.count ++ ;
        },
        onMinus(){
            if(this.count <= 1){
                this.count == 1;
            }
        }
    },
    computed:{
        Price:function(){
            let price = 0;
            this.list.forEach(item=>{
                price += item.num * item.minPrice
            })
           
            return price
        },
        Num(){
            let num = 0;
            this.list.forEach(item=>{
                num += item.num
                
            })
        //    num.toFixed(2)
          
            return num
        }
    }
    
    
}
</script>

<style>
.mall
{
    width: 100%;
    height: 22rem;
    /* border: 1px solid black; */

    /* overflow: hidden; */
    overflow: scroll;
}
.mall_container
{
    width: 100%;
    height: 5.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.mall_input_checked
{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mall_img
{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mall_img img
{
    width: 100%;
}
.mall_title
{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 0.6rem;
}
.mall_name
{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.mall_bottom
{
    width: 100%;
    height: 3rem;
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    bottom: 0rem;
    left: 0;
    background: white;
}
.mall_bottom_wrapper
{
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
</style>